<!-- @ts-nocheck -->
<template>
  <view class="order-container">
    <!-- 状态栏占位 -->
    <view :style="{ height: statusBarHeight + 'px' }"></view>

    <!-- 页面标题 -->
    <view class="page-header">
      <view class="title-section">
        <text class="page-title">订单管理</text>
        <text class="date">{{ currentDate }}</text>
      </view>
      <view class="refresh-btn" @click="refreshData">
        <uni-icons type="refresh" size="18" color="#FF8C42"></uni-icons>
      </view>
    </view>

    <!-- 订单统计概览 -->
    <view class="stats-overview">
      <view class="stats-grid">
        <!-- 订单总数 -->
        <view class="stat-card">
          <view class="stat-icon order-icon">
            <uni-icons type="list" size="24" color="#FF8C42"></uni-icons>
          </view>
          <view class="stat-content">
            <text class="stat-label">订单总数</text>
            <text class="stat-value">{{ orderStats.totalOrders }}</text>
          </view>
        </view>
        
        <!-- 待发货 -->
        <view class="stat-card">
          <view class="stat-icon pending-icon">
            <uni-icons type="clock" size="24" color="#FF8C42"></uni-icons>
          </view>
          <view class="stat-content">
            <text class="stat-label">待发货</text>
            <text class="stat-value">{{ orderStats.pendingShipment }}</text>
          </view>
        </view>
        
        <!-- 已发货 -->
        <view class="stat-card">
          <view class="stat-icon shipped-icon">
            <uni-icons type="truck" size="24" color="#FF8C42"></uni-icons>
          </view>
          <view class="stat-content">
            <text class="stat-label">已发货</text>
            <text class="stat-value">{{ orderStats.shipped }}</text>
          </view>
        </view>
        
        <!-- 已完成 -->
        <view class="stat-card">
          <view class="stat-icon completed-icon">
            <uni-icons type="checkmark" size="24" color="#FF8C42"></uni-icons>
          </view>
          <view class="stat-content">
            <text class="stat-label">已完成</text>
            <text class="stat-value">{{ orderStats.completed }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 操作按钮区域 -->
    <view class="action-bar">
      <view class="search-box">
        <uni-icons type="search" size="16" color="#999"></uni-icons>
        <input 
          type="text" 
          v-model="searchKeyword" 
          placeholder="搜索订单号" 
          confirm-type="search"
          @confirm="searchOrders"
          @input="onSearchInput"
        />
        <view v-if="searchKeyword" class="clear-search" @click="clearSearch">
          <uni-icons type="close" size="14" color="#999"></uni-icons>
        </view>
      </view>
    </view>
    
    <!-- 状态标签 -->
    <view class="status-tabs">
      <scroll-view scroll-x="true" class="status-scroll" show-scrollbar="false">
        <view class="status-list">
          <view 
            v-for="(status, index) in orderStatuses" 
            :key="index"
            :class="['status-item', selectedStatus === status.id ? 'status-active' : '']"
            @click="selectStatus(status.id)"
          >
            {{ status.name }}
          </view>
        </view>
      </scroll-view>
    </view>
    
    <!-- 订单列表 -->
    <view class="order-list">
      <view 
        v-for="order in displayOrders" 
        :key="order.id" 
        class="order-card"
        :class="{'order-urgent': isUrgentOrder(order)}"
      >
        <view class="order-header">
          <view class="order-id">订单号: {{ order.orderNumber }}</view>
          <view :class="['order-status', getStatusClass(order.status)]">
            {{ getStatusText(order.status) }}
          </view>
        </view>
        
        <view class="order-info">
          <view class="order-detail-row">
            <text class="detail-label">下单时间:</text>
            <text class="detail-value">{{ formatDate(order.createTime) }}</text>
          </view>
          
          <view class="order-detail-row">
            <text class="detail-label">客户姓名:</text>
            <text class="detail-value">{{ order.customerName }}</text>
          </view>
          
          <view class="order-detail-row">
            <text class="detail-label">联系电话:</text>
            <text class="detail-value">{{ order.customerPhone }}</text>
          </view>
          
          <view class="order-detail-row">
            <text class="detail-label">配送地址:</text>
            <text class="detail-value address-text">{{ order.address }}</text>
          </view>
          
          <view class="order-detail-row">
            <text class="detail-label">商品数量:</text>
            <text class="detail-value">{{ order.itemCount }} 件</text>
          </view>
          
          <view class="order-detail-row">
            <text class="detail-label">订单金额:</text>
            <text class="detail-value order-amount">¥{{ formatPrice(order.totalAmount) }}</text>
          </view>
          
          <view class="order-detail-row" v-if="order.remark">
            <text class="detail-label">备注信息:</text>
            <text class="detail-value remark-text">{{ order.remark }}</text>
          </view>
        </view>
        
        <view class="order-actions">
          <view class="action-btn view-btn" @click="viewOrderDetail(order)">
            <uni-icons type="eye" size="16" color="#FF8C42"></uni-icons>
            <text>详情</text>
          </view>
          
          <view 
            class="action-btn ship-btn" 
            v-if="order.status === 1"
            @click="showShipModal(order)"
          >
            <uni-icons type="truck" size="16" color="#FF8C42"></uni-icons>
            <text>发货</text>
          </view>
          
          <view 
            class="action-btn complete-btn" 
            v-if="order.status === 2"
            @click="completeOrder(order.id)"
          >
            <uni-icons type="checkmark" size="16" color="#FF8C42"></uni-icons>
            <text>完成</text>
          </view>
          
          <view 
            class="action-btn cancel-order-btn" 
            @click="cancelOrder(order.id)" 
            v-if="order.status === 0"
          >
            <uni-icons type="close" size="16" color="#666"></uni-icons>
            <text>取消</text>
          </view>
        </view>
      </view>
      
      <!-- 加载中状态 -->
      <view v-if="isLoading" class="loading-state">
        <uni-icons type="spinner-cycle" size="30" color="#FF8C42"></uni-icons>
        <text class="loading-text">加载中...</text>
      </view>
      
      <!-- 空状态 -->
      <view v-if="!isLoading && displayOrders.length === 0" class="empty-state">
        <image class="empty-image" src="/static/empty-order.png"></image>
        <text class="empty-text">{{ searchKeyword ? '未找到相关订单' : '暂无订单数据' }}</text>
      </view>
    </view>
    
    <!-- 分页控制 -->
    <view v-if="totalPages > 1" class="pagination">
      <view 
        class="pagination-btn prev-btn" 
        :class="{ 'disabled': currentPage === 1 }"
        @click="prevPage"
      >
        <uni-icons type="left" size="14" :color="currentPage === 1 ? '#ccc' : '#666'"></uni-icons>
        <text>上一页</text>
      </view>
      <view class="pagination-info">{{ currentPage }} / {{ totalPages }}</view>
      <view 
        class="pagination-btn next-btn" 
        :class="{ 'disabled': currentPage === totalPages }"
        @click="nextPage"
      >
        <text>下一页</text>
        <uni-icons type="right" size="14" :color="currentPage === totalPages ? '#ccc' : '#666'"></uni-icons>
      </view>
    </view>
    
    <!-- 发货弹窗 -->
    <view v-if="showShipOrderModal" class="modal-overlay" @click="closeShipModal">
      <view class="ship-modal" @click.stop>
        <view class="modal-header">
          <text class="modal-title">订单发货</text>
          <view class="modal-close" @click="closeShipModal">
            <uni-icons type="close" size="20" color="#666"></uni-icons>
          </view>
        </view>
        
        <view class="modal-body">
          <view class="form-item">
            <text class="form-label">订单号</text>
            <text class="form-value">{{ shipOrderData.orderNo }}</text>
          </view>
          
          <view class="form-item">
            <text class="form-label">物流公司</text>
            <input 
              class="form-input" 
              v-model="shipOrderData.shippingCompany" 
              placeholder="请输入物流公司"
            />
          </view>
          
          <view class="form-item">
            <text class="form-label">物流单号</text>
            <input 
              class="form-input" 
              v-model="shipOrderData.trackingNo" 
              placeholder="请输入物流单号"
            />
          </view>
        </view>
        
        <view class="modal-footer">
          <view class="modal-btn cancel-btn" @click="closeShipModal">
            取消
          </view>
          <view class="modal-btn confirm-btn" @click="confirmShipOrder">
            确认发货
          </view>
        </view>
      </view>
    </view>
    
    <!-- 订单详情弹窗 -->
    <view v-if="showOrderModal" class="modal-overlay" @click="closeOrderModal">
      <view class="order-modal" @click.stop>
        <view class="modal-header">
          <text class="modal-title">订单详情</text>
          <view class="modal-close" @click="closeOrderModal">
            <uni-icons type="close" size="20" color="#666"></uni-icons>
          </view>
        </view>
        
        <view class="modal-body">
          <view class="order-status-timeline">
            <view 
              v-for="(status, index) in orderStatusTimeline" 
              :key="index"
              class="timeline-item"
              :class="{'timeline-active': currentOrder && status.id <= currentOrder.status}"
            >
              <view class="timeline-icon">
                <uni-icons :type="status.icon" size="18" :color="currentOrder && status.id <= currentOrder.status ? '#FF8C42' : '#ccc'"></uni-icons>
              </view>
              <view class="timeline-content">
                <view class="timeline-title">{{ status.name }}</view>
                <view class="timeline-time" v-if="currentOrder && getStatusTime(status.id)">
                  {{ getStatusTime(status.id) }}
                </view>
              </view>
            </view>
          </view>
          
          <view class="divider"></view>
          
          <view class="order-detail-section">
            <view class="section-title">基本信息</view>
            
            <view class="detail-grid">
              <view class="detail-item">
                <text class="detail-label">订单号</text>
                <text class="detail-value">{{ currentOrder?.orderNumber }}</text>
              </view>
              
              <view class="detail-item">
                <text class="detail-label">下单时间</text>
                <text class="detail-value">{{ formatDate(currentOrder?.createTime) }}</text>
              </view>
              
              <view class="detail-item">
                <text class="detail-label">支付方式</text>
                <text class="detail-value">{{ getPaymentMethod(currentOrder?.paymentMethod) }}</text>
              </view>
              
              <view class="detail-item">
                <text class="detail-label">订单状态</text>
                <text class="detail-value">{{ getStatusText(currentOrder?.status) }}</text>
              </view>
            </view>
          </view>
          
          <view class="divider"></view>
          
          <view class="order-detail-section">
            <view class="section-title">客户信息</view>
            
            <view class="detail-list">
              <view class="detail-list-item">
                <text class="detail-label">客户姓名</text>
                <text class="detail-value">{{ currentOrder?.customerName }}</text>
              </view>
              
              <view class="detail-list-item">
                <text class="detail-label">联系电话</text>
                <text class="detail-value">{{ currentOrder?.customerPhone }}</text>
              </view>
              
              <view class="detail-list-item">
                <text class="detail-label">配送地址</text>
                <text class="detail-value">{{ currentOrder?.address }}</text>
              </view>
              
              <view class="detail-list-item" v-if="currentOrder?.remark">
                <text class="detail-label">备注信息</text>
                <text class="detail-value">{{ currentOrder?.remark }}</text>
              </view>
            </view>
          </view>
          
          <view class="divider"></view>
          
          <view class="order-detail-section">
            <view class="section-title">商品信息</view>
            
            <view class="order-items">
              <view 
                v-for="(item, index) in currentOrder?.items" 
                :key="index"
                class="order-item"
              >
                <image class="item-image" :src="getProductImage(item)" mode="aspectFill"></image>
                <view class="item-info">
                  <text class="item-name">{{ item.productName }}</text>
                  <view class="item-meta">
                    <text class="item-price">¥{{ formatPrice(item.price) }}</text>
                    <text class="item-quantity">x {{ item.quantity }}</text>
                  </view>
                  <text class="item-subtotal">小计: ¥{{ formatPrice(item.price * item.quantity) }}</text>
                </view>
              </view>
            </view>
            
            <view class="order-summary">
              <view class="summary-row">
                <text class="summary-label">商品总额</text>
                <text class="summary-value">¥{{ formatPrice(getSubtotal()) }}</text>
              </view>
              
              <view class="summary-row">
                <text class="summary-label">运费</text>
                <text class="summary-value">¥{{ formatPrice(currentOrder?.shippingFee || 0) }}</text>
              </view>
              
              <view class="summary-row" v-if="currentOrder?.discount">
                <text class="summary-label">优惠</text>
                <text class="summary-value discount">-¥{{ formatPrice(currentOrder?.discount) }}</text>
              </view>
              
              <view class="summary-row total-row">
                <text class="summary-label">订单总额</text>
                <text class="summary-value total-amount">¥{{ formatPrice(currentOrder?.totalAmount) }}</text>
              </view>
            </view>
          </view>
        </view>
        
        <view class="modal-footer">
          <view 
            class="modal-btn ship-btn" 
            v-if="currentOrder?.status === 1"
            @click="showShipModal(currentOrder)"
          >
            发货
          </view>
          
          <view 
            class="modal-btn complete-btn" 
            v-if="currentOrder?.status === 2"
            @click="completeOrder(currentOrder?.id)"
          >
            确认完成
          </view>
          
          <view 
            class="modal-btn cancel-btn" 
            v-if="currentOrder?.status === 0"
            @click="cancelOrder(currentOrder?.id)"
          >
            取消订单
          </view>
          
          <view class="modal-btn close-btn" @click="closeOrderModal">
            关闭
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
// 修改导入语句，确保正确导入 computed
// 在导入部分添加 UniApp 类型
import { ref, reactive, computed, onMounted } from 'vue'

// 定义 UniPointerEvent 类型（如果没有内置）
interface UniPointerEvent {
  detail: any;
  currentTarget: any;
  target: any;
  type: string;
}

// 订单商品项接口
interface OrderItem {
  id: number
  productName: string
  price: number
  quantity: number
  imageUrl?: string
}

// 订单接口
interface Order {
  id: number
  orderNumber: string
  customerName: string
  customerPhone: string
  address: string
  status: number
  totalAmount: number
  itemCount: number
  createTime: string
  shipTime?: string
  completeTime?: string
  cancelTime?: string
  paymentMethod?: number
  remark?: string
  items?: OrderItem[]
  shippingFee?: number
  discount?: number
}

// 统计接口
interface OrderStats {
  totalOrders: number
  pendingShipment: number
  shipped: number
  completed: number
  cancelled: number
}

// 状态接口
interface StatusOption {
  id: string | number
  name: string
}

// 时间线状态接口
interface TimelineStatus {
  id: number
  name: string
  icon: string
}

// 发货数据接口
interface ShipOrderData {
  orderNo: string
  trackingNo: string
  shippingCompany: string
}

// 基础数据
const statusBarHeight = ref<number>(0)
const searchKeyword = ref<string>('')
const selectedStatus = ref<string | number>('all')
const allOrders = ref<Order[]>([])
const isLoading = ref<boolean>(false)
const showOrderModal = ref<boolean>(false)
const showShipOrderModal = ref<boolean>(false)
const currentOrder = ref<Order | null>(null)

// 发货相关数据
const shipOrderData = reactive<ShipOrderData>({
  orderNo: '',
  trackingNo: '',
  shippingCompany: ''
})

// 分页相关
const currentPage = ref<number>(1)
const pageSize = ref<number>(10)
const totalPages = ref<number>(1)
const totalRecords = ref<number>(0)

// 订单统计数据
const orderStats = reactive<OrderStats>({
  totalOrders: 0,
  pendingShipment: 0,
  shipped: 0,
  completed: 0,
  cancelled: 0
})

// 订单状态
const orderStatuses: StatusOption[] = [
  { id: 'all', name: '全部' },
  { id: 1, name: '待发货' },
  { id: 2, name: '已发货' },
  { id: 3, name: '已完成' },
  { id: 4, name: '已取消' },
  { id: 5, name: '退款/退货' }
]

// 订单状态时间线
const orderStatusTimeline: TimelineStatus[] = [
  { id: 1, name: '订单提交', icon: 'file' },
  { id: 2, name: '已发货', icon: 'truck' },
  { id: 3, name: '已完成', icon: 'checkmark' }
]

// 获取当前日期
const currentDate = computed<string>(() => {
  const now = new Date()
  const year = now.getFullYear()
  const month = now.getMonth() + 1
  const day = now.getDate()
  return `${year}年${month}月${day}日`
})

// 当前页显示的订单
const displayOrders = computed<Order[]>(() => {
  return allOrders.value
})

// 获取状态栏高度
const getStatusBarHeight = (): void => {
  try {
    const systemInfo = uni.getSystemInfoSync()
    statusBarHeight.value = systemInfo.statusBarHeight || 0
  } catch (e) {
    console.error('获取系统信息失败:', e)
    statusBarHeight.value = 0
  }
}

// 基于数据库的完整模拟订单数据
const mockOrdersData = [
  {
    id: 5,
    orderNumber: '20250516220518614',
    customerName: '李四',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 1,
    totalAmount: 50.90,
    itemCount: 2,
    createTime: '2025-05-16 22:05:18',
    updateTime: '2025-05-16 22:05:18',
    paymentMethod: 1,
    remark: '请尽快发货',
    items: [
      { id: 1, productName: '可口可乐', price: 3.50, quantity: 6, imageUrl: '/static/cola.png' },
      { id: 2, productName: '蓝月亮洗衣液', price: 29.90, quantity: 1, imageUrl: '/static/bluemoon.png' }
    ]
  },
  {
    id: 6,
    orderNumber: '20250516225839859',
    customerName: '123456',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 0,
    totalAmount: 4.00,
    itemCount: 2,
    createTime: '2025-05-16 22:58:39',
    updateTime: '2025-05-16 23:02:33',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 3, productName: '农夫山泉', price: 2.00, quantity: 2, imageUrl: '/static/nongfuwater.png' }
    ]
  },
  {
    id: 9,
    orderNumber: '20250519154141445',
    customerName: '李四',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 1,
    totalAmount: 196.00,
    itemCount: 56,
    createTime: '2025-05-19 15:41:41',
    updateTime: '2025-05-19 15:41:41',
    paymentMethod: 1,
    remark: 'qui id velit',
    items: [
      { id: 4, productName: '可口可乐', price: 3.50, quantity: 56, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 11,
    orderNumber: '20250519154241307',
    customerName: '李四',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 1,
    totalAmount: 24.00,
    itemCount: 4,
    createTime: '2025-05-19 15:42:41',
    updateTime: '2025-05-19 15:42:41',
    paymentMethod: 1,
    remark: 'enim id non',
    items: [
      { id: 5, productName: '可口可乐', price: 3.50, quantity: 2, imageUrl: '/static/cola.png' },
      { id: 6, productName: '乐事薯片', price: 8.50, quantity: 2, imageUrl: '/static/lays.png' }
    ]
  },
  {
    id: 12,
    orderNumber: '20250519154517269',
    customerName: '李四',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 0,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-19 15:45:17',
    updateTime: '2025-05-19 15:45:17',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 7, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 13,
    orderNumber: '20250519155032432',
    customerName: '李四',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 0,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-19 15:50:32',
    updateTime: '2025-05-19 15:50:32',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 8, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 14,
    orderNumber: '20250519155581635',
    customerName: '李四',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 0,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-19 15:55:58',
    updateTime: '2025-05-19 15:55:58',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 9, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 15,
    orderNumber: '20250519155618772',
    customerName: '李四',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 0,
    totalAmount: 5.50,
    itemCount: 2,
    createTime: '2025-05-19 15:56:18',
    updateTime: '2025-05-19 15:56:18',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 10, productName: '农夫山泉', price: 2.00, quantity: 1, imageUrl: '/static/nongfuwater.png' }
    ]
  },
  {
    id: 16,
    orderNumber: '20250519155857680',
    customerName: '李四',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 0,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-19 15:58:57',
    updateTime: '2025-05-19 15:58:57',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 11, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 17,
    orderNumber: '20250519155913966',
    customerName: '李四',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 0,
    totalAmount: 7.00,
    itemCount: 2,
    createTime: '2025-05-19 15:59:13',
    updateTime: '2025-05-19 15:59:13',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 12, productName: '乐事薯片', price: 8.50, quantity: 2, imageUrl: '/static/lays.png' }
    ]
  },
  {
    id: 18,
    orderNumber: '20250519155930204',
    customerName: '李四',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 0,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-19 15:59:30',
    updateTime: '2025-05-19 15:59:30',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 13, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 19,
    orderNumber: '20250519160036251',
    customerName: '李四',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 0,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-19 16:00:36',
    updateTime: '2025-05-19 16:00:36',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 14, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 20,
    orderNumber: '20250519160418821',
    customerName: '李四',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 0,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-19 16:04:18',
    updateTime: '2025-05-19 16:04:18',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 15, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 21,
    orderNumber: '20250519161259421',
    customerName: '李四',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 0,
    totalAmount: 5.50,
    itemCount: 2,
    createTime: '2025-05-19 16:12:59',
    updateTime: '2025-05-19 16:12:59',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 16, productName: '农夫山泉', price: 2.00, quantity: 1, imageUrl: '/static/nongfuwater.png' }
    ]
  },
  {
    id: 22,
    orderNumber: '20250519162020362',
    customerName: '李四',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 0,
    totalAmount: 10.50,
    itemCount: 3,
    createTime: '2025-05-19 16:20:20',
    updateTime: '2025-05-19 16:20:20',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 17, productName: '可口可乐', price: 3.50, quantity: 3, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 23,
    orderNumber: '20250519164608675',
    customerName: '李四',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 1,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-19 16:46:08',
    updateTime: '2025-05-19 16:46:08',
    paymentMethod: 1,
    remark: 'enim id non',
    shipTime: '2025-05-19 16:46:09',
    items: [
      { id: 18, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 24,
    orderNumber: '20250519165429437',
    customerName: '李四',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 0,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-19 16:54:29',
    updateTime: '2025-05-19 16:54:29',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 19, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 25,
    orderNumber: '20250519170253359',
    customerName: '李四',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 0,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-19 17:02:53',
    updateTime: '2025-05-19 17:02:53',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 20, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 26,
    orderNumber: '20250519170359132',
    customerName: '李四',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 0,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-19 17:03:59',
    updateTime: '2025-05-19 17:03:59',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 21, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 27,
    orderNumber: '20250519170724586',
    customerName: '李四',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 0,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-19 17:07:24',
    updateTime: '2025-05-19 17:07:24',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 22, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 28,
    orderNumber: '20250519170745893',
    customerName: '李四',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 0,
    totalAmount: 10.50,
    itemCount: 3,
    createTime: '2025-05-19 17:07:45',
    updateTime: '2025-05-19 17:07:45',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 23, productName: '可口可乐', price: 3.50, quantity: 3, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 29,
    orderNumber: '20250519171919221',
    customerName: '李四',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 0,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-19 17:19:19',
    updateTime: '2025-05-19 17:19:19',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 24, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 30,
    orderNumber: '20250519171944771',
    customerName: '李四',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 0,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-19 17:19:44',
    updateTime: '2025-05-19 17:19:44',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 25, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 31,
    orderNumber: '20250519172107689',
    customerName: '李四',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 0,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-19 17:21:07',
    updateTime: '2025-05-19 17:21:07',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 26, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 32,
    orderNumber: '20250519172545820',
    customerName: '李四',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 0,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-19 17:25:45',
    updateTime: '2025-05-19 17:25:45',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 27, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 33,
    orderNumber: '20250519181043382',
    customerName: '李四',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 0,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-19 18:10:43',
    updateTime: '2025-05-19 18:10:43',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 28, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 34,
    orderNumber: '20250519181400319',
    customerName: '李四',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 0,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-19 18:14:00',
    updateTime: '2025-05-19 18:14:00',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 29, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 35,
    orderNumber: '20250519182517258',
    customerName: '李四',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 0,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-19 18:25:17',
    updateTime: '2025-05-19 18:25:17',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 30, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 36,
    orderNumber: '20250519182650727',
    customerName: '李四',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 0,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-19 18:26:50',
    updateTime: '2025-05-19 18:26:50',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 31, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 37,
    orderNumber: '20250519183103703',
    customerName: '李四',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 0,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-19 18:31:03',
    updateTime: '2025-05-19 18:31:03',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 32, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 38,
    orderNumber: '20250519183629840',
    customerName: '李四',
    customerPhone: '13900139001',
    address: '湖南省长沙市雨花区雨花亭',
    status: 0,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-19 18:36:29',
    updateTime: '2025-05-19 18:36:29',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 33, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 39,
    orderNumber: '20250519184322807',
    customerName: 'qq',
    customerPhone: '12345661223',
    address: '广东省深圳市南山区1',
    status: 0,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-19 18:43:22',
    updateTime: '2025-05-19 18:43:22',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 34, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 40,
    orderNumber: '20250519184708946',
    customerName: 'qq',
    customerPhone: '12345661223',
    address: '广东省深圳市南山区1',
    status: 1,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-19 18:47:08',
    updateTime: '2025-05-19 18:47:08',
    paymentMethod: 1,
    remark: '立即购买',
    shipTime: '2025-05-19 18:47:09',
    items: [
      { id: 35, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 41,
    orderNumber: '20250519184713622',
    customerName: 'qq',
    customerPhone: '12345661223',
    address: '广东省深圳市南山区1',
    status: 0,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-19 18:47:13',
    updateTime: '2025-05-19 18:47:13',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 36, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 42,
    orderNumber: '20250519184733926',
    customerName: 'qq',
    customerPhone: '12345661223',
    address: '广东省深圳市南山区1',
    status: 1,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-19 18:47:33',
    updateTime: '2025-05-19 18:47:33',
    paymentMethod: 1,
    remark: '立即购买',
    shipTime: '2025-05-19 18:47:34',
    items: [
      { id: 37, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 43,
    orderNumber: '20250519184854175',
    customerName: 'qq',
    customerPhone: '12345661223',
    address: '广东省深圳市南山区1',
    status: 0,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-19 18:48:54',
    updateTime: '2025-05-19 18:48:54',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 38, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 44,
    orderNumber: '20250519185011362',
    customerName: 'qq',
    customerPhone: '12345661223',
    address: '广东省深圳市南山区1',
    status: 0,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-19 18:50:11',
    updateTime: '2025-05-19 18:50:11',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 39, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 45,
    orderNumber: '20250519185737295',
    customerName: 'shf',
    customerPhone: '15234665181',
    address: '广东省深圳市南山区1',
    status: 0,
    totalAmount: 8.50,
    itemCount: 1,
    createTime: '2025-05-19 18:57:37',
    updateTime: '2025-05-19 18:57:37',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 40, productName: '乐事薯片', price: 8.50, quantity: 1, imageUrl: '/static/lays.png' }
    ]
  },
  {
    id: 46,
    orderNumber: '20250519190653763',
    customerName: 'wkb',
    customerPhone: '15674223181',
    address: '广东省深圳市南山区1',
    status: 0,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-19 19:06:53',
    updateTime: '2025-05-19 19:06:53',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 41, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 47,
    orderNumber: '20250519190738271',
    customerName: 'wkb',
    customerPhone: '15674223181',
    address: '广东省深圳市南山区1',
    status: 0,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-19 19:07:38',
    updateTime: '2025-05-19 19:07:38',
    paymentMethod: 1,
    remark: '',
    items: [
      { id: 42, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 48,
    orderNumber: '20250520144814695',
    customerName: 'qq',
    customerPhone: '12345661223',
    address: '广东省深圳市南山区1',
    status: 1,
    totalAmount: 3.50,
    itemCount: 1,
    createTime: '2025-05-20 14:48:14',
    updateTime: '2025-05-20 14:48:14',
    paymentMethod: 1,
    remark: '立即购买',
    items: [
      { id: 43, productName: '可口可乐', price: 3.50, quantity: 1, imageUrl: '/static/cola.png' }
    ]
  },
  {
    id: 49,
    orderNumber: '20250520144815695',
    customerName: 'qq',
    customerPhone: '12345661223',
    address: '广东省深圳市南山区1',
    status: 1,
    totalAmount: 7.00,
    itemCount: 2,
    createTime: '2025-05-20 14:48:15',
    updateTime: '2025-05-20 14:48:15',
    paymentMethod: 1,
    remark: '立即购买',
    items: [
      { id: 44, productName: '可口可乐', price: 3.50, quantity: 2, imageUrl: '/static/cola.png' }
    ]
  }
]

// 获取订单数据 - 使用模拟数据
const fetchOrders = async (): Promise<Order[]> => {
  isLoading.value = true
  try {
    // 使用模拟数据
    let filteredOrders = mockOrdersData
    
    // 应用搜索过滤
    if (searchKeyword.value) {
      filteredOrders = filteredOrders.filter(order => 
        order.orderNumber.toLowerCase().includes(searchKeyword.value.toLowerCase())
      )
    }

    // 应用状态过滤
    if (selectedStatus.value !== 'all') {
      filteredOrders = filteredOrders.filter(order => 
        order.status === selectedStatus.value
      )
    }
    
    // 应用分页
    totalRecords.value = filteredOrders.length
    totalPages.value = Math.ceil(totalRecords.value / pageSize.value)
    
    const startIndex = (currentPage.value - 1) * pageSize.value
    const endIndex = startIndex + pageSize.value
    
    allOrders.value = filteredOrders.slice(startIndex, endIndex)
    updateOrderStats()
    
    return allOrders.value
  } catch (error) {
    console.error('获取订单数据出错:', error)
    return []
  } finally {
    isLoading.value = false
  }
}

// 获取订单详情 - 使用模拟数据
const fetchOrderDetail = async (orderNo: string): Promise<Order | null> => {
  try {
    const order = mockOrdersData.find(o => o.orderNumber === orderNo)
    return order || null
  } catch (error) {
    console.error('获取订单详情出错:', error)
    return null
  }
}

// 更新订单统计数据
const updateOrderStats = (): void => {
  // 基于完整的数据库数据计算统计
  const allDbOrders = mockOrdersData
  
  orderStats.totalOrders = allDbOrders.length
  orderStats.pendingShipment = allDbOrders.filter(o => o.status === 1).length
  orderStats.shipped = allDbOrders.filter(o => o.status === 2).length
  orderStats.completed = allDbOrders.filter(o => o.status === 3).length
  orderStats.cancelled = allDbOrders.filter(o => o.status === 0).length
}

// 格式化价格
const formatPrice = (price: number | undefined): string => {
  if (typeof price === 'number') {
    return price.toFixed(2)
  }
  return '0.00'
}

// 格式化日期
const formatDate = (dateStr: string | undefined): string => {
  if (!dateStr) return '-'
  try {
    const date = new Date(dateStr)
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
  } catch (e) {
    return dateStr
  }
}

// 获取订单状态文本
const getStatusText = (status: number | undefined): string => {
  switch (status) {
    case 1: return '待发货'
    case 2: return '已发货'
    case 3: return '已完成'
    case 4: return '已取消'
    case 5: return '退款/退货'
    default: return '未知状态'
  }
}

// 获取订单状态类名
const getStatusClass = (status: number | undefined): string => {
  switch (status) {
    case 1: return 'status-pending'
    case 2: return 'status-shipped'
    case 3: return 'status-completed'
    case 4: return 'status-cancelled'
    case 5: return 'status-refund'
    default: return ''
  }
}

// 获取支付方式文本
const getPaymentMethod = (method: number | undefined): string => {
  switch (method) {
    case 1: return '微信支付'
    case 2: return '支付宝'
    case 3: return '银行卡'
    case 4: return '货到付款'
    default: return '未知方式'
  }
}

// 判断是否是紧急订单（超过24小时未发货）
const isUrgentOrder = (order: Order): boolean => {
  if (order.status !== 1) return false
  
  const createTime = new Date(order.createTime).getTime()
  const now = new Date().getTime()
  const hoursDiff = (now - createTime) / (1000 * 60 * 60)
  
  return hoursDiff >= 24
}

// 获取商品图片
const getProductImage = (item: OrderItem): string => {
  if (item.imageUrl) {
    return item.imageUrl
  }
  return `/placeholder.svg?height=100&width=100&text=${encodeURIComponent(item.productName || '商品')}`
}

// 获取订单状态的时间
const getStatusTime = (statusId: number): string => {
  if (!currentOrder.value) return ''
  
  switch (statusId) {
    case 1:
      return formatDate(currentOrder.value.createTime)
    case 2:
      return formatDate(currentOrder.value.shipTime)
    case 3:
      return formatDate(currentOrder.value.completeTime)
    default:
      return ''
  }
}

// 计算商品小计
const getSubtotal = (): number => {
  if (!currentOrder.value || !currentOrder.value.items) return 0
  
  return currentOrder.value.items.reduce((sum, item) => {
    return sum + (item.price * item.quantity)
  }, 0)
}

// 显示发货弹窗
const showShipModal = (order: Order): void => {
  shipOrderData.orderNo = order.orderNumber
  shipOrderData.trackingNo = ''
  shipOrderData.shippingCompany = ''
  showShipOrderModal.value = true
  showOrderModal.value = false
}

// 关闭发货弹窗
const closeShipModal = (): void => {
  showShipOrderModal.value = false
  shipOrderData.orderNo = ''
  shipOrderData.trackingNo = ''
  shipOrderData.shippingCompany = ''
}

// 确认发货 - 使用模拟操作
const confirmShipOrder = async (): Promise<void> => {
  if (!shipOrderData.trackingNo || !shipOrderData.shippingCompany) {
    uni.showToast({
      title: '请填写完整的发货信息',
      icon: 'none'
    })
    return
  }

  uni.showLoading({ title: '处理中...' })
  
  try {
    // 模拟API调用延迟
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 更新模拟数据中的订单状态
    const mockOrderIndex = mockOrdersData.findIndex(o => o.orderNumber === shipOrderData.orderNo)
    if (mockOrderIndex !== -1) {
      mockOrdersData[mockOrderIndex].status = 2
      mockOrdersData[mockOrderIndex].shipTime = new Date().toISOString().replace('T', ' ').substring(0, 19)
    }
    
    // 更新本地订单状态
    const orderIndex = allOrders.value.findIndex(o => o.orderNumber === shipOrderData.orderNo)
    if (orderIndex !== -1) {
      allOrders.value[orderIndex].status = 2
      allOrders.value[orderIndex].shipTime = new Date().toISOString().replace('T', ' ').substring(0, 19)
    }
    
    // 如果当前正在查看这个订单，也要更新当前订单
    if (currentOrder.value && currentOrder.value.orderNumber === shipOrderData.orderNo) {
      currentOrder.value.status = 2
      currentOrder.value.shipTime = new Date().toISOString().replace('T', ' ').substring(0, 19)
    }
    
    updateOrderStats()
    closeShipModal()
    
    uni.showToast({
      title: '订单已发货',
      icon: 'success'
    })
    
    // 如果正在按状态筛选，可能需要刷新列表
    if (selectedStatus.value !== 'all') {
      fetchOrders()
    }
    
  } catch (error) {
    console.error('发货失败:', error)
    uni.showToast({
      title: '操作失败',
      icon: 'none'
    })
  } finally {
    uni.hideLoading()
  }
}

// 刷新数据
const refreshData = async (): Promise<void> => {
  uni.showLoading({ title: '刷新中...' })
  try {
    await fetchOrders()
    uni.showToast({
      title: '数据已刷新',
      icon: 'success'
    })
  } catch (error) {
    uni.showToast({
      title: '刷新失败',
      icon: 'none'
    })
  } finally {
    uni.hideLoading()
  }
}

// 选择状态
const selectStatus = (statusId: string | number): void => {
  selectedStatus.value = statusId
  currentPage.value = 1
  fetchOrders()
}

// 搜索输入事件
const onSearchInput = (): void => {
  if (searchKeyword.value === '') {
    currentPage.value = 1
    fetchOrders()
  }
}

// 清除搜索
const clearSearch = (): void => {
  searchKeyword.value = ''
  currentPage.value = 1
  fetchOrders()
}

// 搜索订单
const searchOrders = (): void => {
  currentPage.value = 1
  fetchOrders()
}

// 显示筛选选项
const showFilterOptions = (): void => {
  uni.showActionSheet({
    itemList: ['时间从新到旧', '时间从旧到新', '金额从高到低', '金额从低到高'],
    success: (res: any) => {
      uni.showToast({
        title: '筛选功能开发中',
        icon: 'none'
      })
    }
  })
}

// 查看订单详情
const viewOrderDetail = async (order: Order): Promise<void> => {
  uni.showLoading({ title: '加载详情...' })
  try {
    const orderDetail = await fetchOrderDetail(order.orderNumber)
    if (orderDetail) {
      currentOrder.value = orderDetail
      showOrderModal.value = true
    }
  } catch (error) {
    console.error('获取订单详情失败:', error)
  } finally {
    uni.hideLoading()
  }
}

// 关闭订单弹窗
const closeOrderModal = (): void => {
  showOrderModal.value = false
  currentOrder.value = null
}

// 完成订单
const completeOrder = (orderId: number | undefined): void => {
  if (!orderId) return
  
  uni.showModal({
    title: '确认完成',
    content: '确认将此订单标记为已完成？',
    success: async (res: { confirm: boolean; cancel: boolean }) => {
      if (res.confirm) {
        uni.showLoading({ title: '处理中...' })
        
        try {
          // 模拟API调用延迟
          await new Promise(resolve => setTimeout(resolve, 800))
          
          // 更新模拟数据中的订单状态
          const mockOrderIndex = mockOrdersData.findIndex(o => o.id === orderId)
          if (mockOrderIndex !== -1) {
            mockOrdersData[mockOrderIndex].status = 3
            mockOrdersData[mockOrderIndex].completeTime = new Date().toISOString().replace('T', ' ').substring(0, 19)
          }
          
          // 更新本地订单状态
          const orderIndex = allOrders.value.findIndex(o => o.id === orderId)
          if (orderIndex !== -1) {
            allOrders.value[orderIndex].status = 3
            allOrders.value[orderIndex].completeTime = new Date().toISOString().replace('T', ' ').substring(0, 19)
          }
          
          // 如果当前正在查看这个订单，也要更新当前订单
          if (currentOrder.value && currentOrder.value.id === orderId) {
            currentOrder.value.status = 3
            currentOrder.value.completeTime = new Date().toISOString().replace('T', ' ').substring(0, 19)
          }
          
          updateOrderStats()
          closeOrderModal()
          
          uni.showToast({
            title: '订单已完成',
            icon: 'success'
          })
          
          // 刷新列表
          fetchOrders()
          
        } catch (error) {
          console.error('完成订单失败:', error)
          uni.showToast({
            title: '操作失败',
            icon: 'none'
          })
        } finally {
          uni.hideLoading()
        }
      }
    }
  })
}

// 取消订单
const cancelOrder = (orderId: number | undefined): void => {
  if (!orderId) return
  
  uni.showModal({
    title: '确认取消',
    content: '确认取消此订单？此操作不可恢复！',
    success: async (res) => {
      if (res.confirm) {
        uni.showLoading({ title: '处理中...' })
        
        try {
          // 模拟API调用延迟
          await new Promise(resolve => setTimeout(resolve, 800))
          
          // 更新模拟数据中的订单状态
          const mockOrderIndex = mockOrdersData.findIndex(o => o.id === orderId)
          if (mockOrderIndex !== -1) {
            mockOrdersData[mockOrderIndex].status = 4
            mockOrdersData[mockOrderIndex].cancelTime = new Date().toISOString().replace('T', ' ').substring(0, 19)
          }
          
          // 更新本地订单状态
          const orderIndex = allOrders.value.findIndex(o => o.id === orderId)
          if (orderIndex !== -1) {
            allOrders.value[orderIndex].status = 4
            allOrders.value[orderIndex].cancelTime = new Date().toISOString().replace('T', ' ').substring(0, 19)
          }
          
          // 如果当前正在查看这个订单，也要更新当前订单
          if (currentOrder.value && currentOrder.value.id === orderId) {
            currentOrder.value.status = 4
            currentOrder.value.cancelTime = new Date().toISOString().replace('T', ' ').substring(0, 19)
          }
          
          updateOrderStats()
          closeOrderModal()
          
          uni.showToast({
            title: '订单已取消',
            icon: 'success'
          })
          
          // 刷新列表
          fetchOrders()
          
        } catch (error) {
          console.error('取消订单失败:', error)
          uni.showToast({
            title: '操作失败',
            icon: 'none'
          })
        } finally {
          uni.hideLoading()
        }
      }
    }
  })
}

// 分页控制 - 上一页
const prevPage = (): void => {
  if (currentPage.value > 1) {
    currentPage.value--
    fetchOrders()
  }
}

// 分页控制 - 下一页
const nextPage = (): void => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
    fetchOrders()
  }
}

// 页面加载时执行
onMounted(async () => {
  console.log('订单管理页面加载完成')
  getStatusBarHeight()
  
  // 获取订单数据
  try {
    await fetchOrders()
  } catch (error) {
    console.error('初始化数据失败:', error)
  }
})
</script>

<style>
.order-container {
  padding-bottom: 120rpx;
  background-color: #FFF9F2;
  min-height: 100vh;
}

.page-header {
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #FFFFFF;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  border-bottom: 1rpx solid #FFE6CC;
}

.title-section {
  display: flex;
  flex-direction: column;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
}

.date {
  font-size: 24rpx;
  color: #999999;
  margin-top: 6rpx;
}

.refresh-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFF0E0;
  border-radius: 30rpx;
}

.stats-overview {
  padding: 20rpx 30rpx;
}

.stats-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10rpx;
}

.stat-card {
  width: calc(50% - 20rpx);
  margin: 10rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 20rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  border: 1rpx solid #FFE6CC;
}

.stat-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20rpx;
  background-color: #FFF0E0;
}

.stat-content {
  flex: 1;
}

.stat-label {
  font-size: 24rpx;
  color: #666666;
  display: block;
  margin-bottom: 10rpx;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
  display: block;
}

.action-bar {
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
}

.search-box {
  flex: 1;
  height: 70rpx;
  background-color: #FFFFFF;
  border-radius: 35rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  border: 1rpx solid #FFE6CC;
  position: relative;
}

.search-box uni-icons {
  margin-right: 10rpx;
}

.search-box input {
  flex: 1;
  height: 70rpx;
  font-size: 28rpx;
  padding-right: 40rpx;
}

.clear-search {
  position: absolute;
  right: 20rpx;
  width: 40rpx;
  height: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 20rpx;
}

.filter-btn {
  height: 70rpx;
  background-color: #FFFFFF;
  border-radius: 35rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20rpx;
  margin-left: 20rpx;
  border: 1rpx solid #FFE6CC;
}

.filter-text {
  font-size: 28rpx;
  color: #666;
  margin-left: 6rpx;
}

.export-btn {
  height: 70rpx;
  background-color: #FF8C42;
  border-radius: 35rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 30rpx;
  margin-left: 20rpx;
  color: #FFFFFF;
  font-size: 28rpx;
}

.export-btn uni-icons {
  margin-right: 10rpx;
}

.status-tabs {
  padding: 10rpx 0;
  background-color: #FFFFFF;
  border-bottom: 1rpx solid #FFE6CC;
}

.status-scroll {
  width: 100%;
  white-space: nowrap;
}

.status-list {
  padding: 0 20rpx;
  display: inline-flex;
}

.status-item {
  padding: 10rpx 30rpx;
  margin: 0 10rpx;
  font-size: 28rpx;
  color: #666666;
  background-color: #F5F5F5;
  border-radius: 30rpx;
  display: inline-block;
}

.status-active {
  background-color: #FFF0E0;
  color: #FF8C42;
  font-weight: bold;
}

.order-list {
  padding: 20rpx 30rpx;
}

.order-card {
  margin-bottom: 30rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.order-urgent {
  border: 2rpx solid #FF6B6B;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #F0F0F0;
}

.order-id {
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
}

.order-status {
  font-size: 24rpx;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
}

.status-pending {
  background-color: #FFF0E0;
  color: #FF8C42;
}

.status-shipped {
  background-color: #E6F7FF;
  color: #1890FF;
}

.status-completed {
  background-color: #F6FFED;
  color: #52C41A;
}

.status-cancelled {
  background-color: #F5F5F5;
  color: #999999;
}

.status-refund {
  background-color: #FFF1F0;
  color: #FF4D4F;
}

.order-info {
  padding: 20rpx;
}

.order-detail-row {
  display: flex;
  margin-bottom: 10rpx;
  font-size: 28rpx;
}

.detail-label {
  width: 160rpx;
  color: #666666;
}

.detail-value {
  flex: 1;
  color: #333333;
}

.address-text {
  word-break: break-all;
}

.remark-text {
  color: #FF8C42;
}

.order-amount {
  color: #FF8C42;
  font-weight: bold;
}

.order-actions {
  display: flex;
  border-top: 1rpx solid #F0F0F0;
  padding: 15rpx 0;
}

.action-btn {
  flex: 1;
  height: 70rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  color: #666666;
}

.action-btn uni-icons {
  margin-right: 6rpx;
}

.view-btn, .ship-btn, .complete-btn {
  color: #FF8C42;
}

.cancel-order-btn {
  color: #999999;
}

.loading-state {
  width: 100%;
  padding: 60rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loading-text {
  font-size: 28rpx;
  color: #999999;
  margin-top: 20rpx;
}

.empty-state {
  width: 100%;
  padding: 100rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
  opacity: 0.5;
}

.empty-text {
  font-size: 28rpx;
  color: #999999;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30rpx 0;
  background-color: #FFFFFF;
  margin-top: 20rpx;
  border-radius: 16rpx;
}

.pagination-btn {
  display: flex;
  align-items: center;
  padding: 10rpx 20rpx;
  border: 1rpx solid #DDDDDD;
  border-radius: 30rpx;
  font-size: 24rpx;
  color: #666666;
  margin: 0 20rpx;
}

.pagination-btn.disabled {
  opacity: 0.5;
  color: #CCCCCC;
}

.prev-btn uni-icons {
  margin-right: 6rpx;
}

.next-btn uni-icons {
  margin-left: 6rpx;
}

.pagination-info {
  font-size: 24rpx;
  color: #666666;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.ship-modal {
  width: 600rpx;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  overflow: hidden;
}

.order-modal {
  width: 650rpx;
  max-height: 90vh;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #F0F0F0;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.modal-close {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-body {
  padding: 30rpx;
  max-height: 70vh;
  overflow-y: auto;
}

.form-item {
  margin-bottom: 30rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 10rpx;
}

.form-value {
  font-size: 28rpx;
  color: #666666;
}

.form-input {
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  border: 1rpx solid #DDDDDD;
  border-radius: 10rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.order-status-timeline {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}

.timeline-item:not(:last-child)::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2rpx;
  background-color: #DDDDDD;
  top: 40rpx;
  right: -50%;
  z-index: 0;
}

.timeline-item.timeline-active:not(:last-child)::after {
  background-color: #FF8C42;
}

.timeline-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2rpx solid #DDDDDD;
  z-index: 1;
  margin-bottom: 10rpx;
}

.timeline-active .timeline-icon {
  border-color: #FF8C42;
}

.timeline-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}

.timeline-title {
  font-size: 24rpx;
  color: #666666;
  margin-bottom: 6rpx;
  text-align: center;
}

.timeline-active .timeline-title {
  color: #FF8C42;
  font-weight: bold;
}

.timeline-time {
  font-size: 20rpx;
  color: #999999;
  text-align: center;
}

.divider {
  height: 1rpx;
  background-color: #F0F0F0;
  margin: 30rpx 0;
}

.order-detail-section {
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20rpx;
  padding-left: 20rpx;
  border-left: 6rpx solid #FF8C42;
}

.detail-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10rpx;
}

.detail-item {
  width: 50%;
  padding: 10rpx;
  box-sizing: border-box;
}

.detail-list {
  display: flex;
  flex-direction: column;
}

.detail-list-item {
  display: flex;
  padding: 15rpx 0;
  border-bottom: 1rpx solid #F5F5F5;
}

.detail-list-item:last-child {
  border-bottom: none;
}

.order-items {
  margin-bottom: 30rpx;
}

.order-item {
  display: flex;
  padding: 20rpx;
  border-bottom: 1rpx solid #F5F5F5;
}

.order-item:last-child {
  border-bottom: none;
}

.item-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.item-name {
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 10rpx;
}

.item-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.item-price {
  font-size: 26rpx;
  color: #FF8C42;
}

.item-quantity {
  font-size: 26rpx;
  color: #666666;
}

.item-subtotal {
  font-size: 24rpx;
  color: #999999;
  align-self: flex-end;
}

.order-summary {
  padding: 20rpx;
  background-color: #F9F9F9;
  border-radius: 10rpx;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15rpx;
}

.summary-row:last-child {
  margin-bottom: 0;
}

.summary-label {
  font-size: 26rpx;
  color: #666666;
}

.summary-value {
  font-size: 26rpx;
  color: #333333;
}

.discount {
  color: #FF6B6B;
}

.total-row {
  margin-top: 10rpx;
  padding-top: 10rpx;
  border-top: 1rpx solid #EEEEEE;
}

.total-amount {
  font-size: 32rpx;
  font-weight: bold;
  color: #FF8C42;
}

.modal-footer {
  display: flex;
  padding: 20rpx;
  border-top: 1rpx solid #F0F0F0;
  overflow-x: auto;
  white-space: nowrap;
}

.modal-btn {
  min-width: 140rpx;
  height: 70rpx;
  border-radius: 35rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  margin: 0 10rpx;
  flex-shrink: 0;
}

.ship-btn {
  background-color: #FF8C42;
  color: #FFFFFF;
}

.complete-btn {
  background-color: #52C41A;
  color: #FFFFFF;
}

.print-btn {
  background-color: #1890FF;
  color: #FFFFFF;
}

.cancel-btn {
  background-color: #F5F5F5;
  color: #666666;
}

.confirm-btn {
  background-color: #FF8C42;
  color: #FFFFFF;
}

.close-btn {
  background-color: #F5F5F5;
  color: #666666;
}
</style>
